<template>
	<div class="page_videos">
		<ul>
			<li>
				<div v-for="(item, index) in videoData" v-if="index%2 !== 0 && index < end" class="page_videos_item">
					<router-link :to="{name:'videoview', params:{id:item.videoId}}">
						<div class="page_videos_item_img"><img :src="item.img"></div>
						<h1>{{item.title}}</h1>
						<p>{{item.subTitle}}</p>
					</router-link>
				</div>
			</li>
			<li>
				<div v-for="(item, index) in videoData" v-if="index%2 == 0 && index < end" class="page_videos_item">
					<router-link  :to="{name:'videoview', params:{id:item.videoId}}">
						<div class="page_videos_item_img"><img :src="item.img"></div>
						<h1>{{item.title}}</h1>
						<p>{{item.subTitle}}</p>
					</router-link>
				</div>
			</li>
		</ul>
		<a href="javascript:;" @click="moreClickHandle" v-if="isMoreShow" class="more_video">更多视频</a>
	</div>
</template>
<script>
	import Axios from "axios";
	import qs from "Qs";
	export default{
		name: "videos",
		data: function(){
			return{
				videoData:[],
				end:20,
				isMoreShow: true
			}
		},
		mounted:function(){
			const that = this;
			this.$emit("setDataObject", {type:"videos", title:"视频", showTip:false});
			this.getVideos();
		},
		methods:{
			moreClickHandle(){
				let val = this.$data.end+20;
				if (val < this.$data.videoData.length){
					if (val+20>=this.$data.videoData.length) val+=20;
					this.$set(this, "end", val)
				}else{
					this.$set(this, "isMoreShow", false)
				}
			},
			getVideos(){
				const that = this;
				Axios.post(this.$store.state.api.getVideos).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						that.$set(that, "videoData", res.data.data)
					}else{

					}
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.page_videos{
		margin:70/@base 0 0;
		ul{
			display: flex;
			li{
				width:50%;
				&:first-child{
					margin:0 10/@base 0 0;
				}
				.page_videos_item{
					margin:0 0 10/@base 0;
					min-height: 520/@base;
					background-color: #fff;
					a{
						display:block;
						text-decoration: none;
						font-size: 20/@base;
						color:#333;
						.page_videos_item_img{
							overflow: hidden;
							max-height: 400/@base;
							img{
								width:100%;
								height:100%;
							}
						}
						h1{
							font-size: 20/@base;
							font-weight: 400;
							padding:10/@base 20/@base;
							height:20/@base;
							overflow: hidden;
						}
						p{
							font-size: 20/@base;
							padding:10/@base 20/@base 20/@base 20/@base;
						}
					}
				}
			}
		}
		a{
			&.more_video{
				display:block;
				text-align: center;
				text-decoration: none;
				color:#999;
				background-color: #fff;
				padding:30/@base 20/@base;
			}
		}
	}
</style>